/*
 * @Descripttion: 
 * @TapdLink: https://XXX
 * @DesignsLink: https://XXX
 * @RelatedPersons: XXX[市场]、XXX[产品]、XXX[前端]、XXX[后端]、XXX[设计]
 * @version: 1.0.0
 * @Author: Shentong
 * @LastEditors: Shentong
 * @Date: 2021-11-05 14:17:42
 */
import React, { useRef, useImperativeHandle, useEffect, useState } from 'react';
import { View } from "@tarojs/components";
/**
 * 动画球
 * @params children - 小球扩展内容
 * @params flyOuterStyle - 小球外层扩展样式
 * @params flyInnerStyle - 小球内层扩展样式
 * @params runTime - 小球运动时间
 * @params ref - 小球dom实例
 */
const flyBall = ({attrs}) => {
    const [isRunning, setIsRunning] = useState(false)

    const [flyOuter_Style, setFlyOuter_Style] = useState({})
    const [flyInner_Style, setFlyInner_Style] = useState({})
    

    const { children, flyOuterStyle = {}, flyInnerStyle = {}, runTime = 0.8, startRef, endRef, launchXY, targetXY } = attrs

    const flyOuterRef = useRef();
    const flyInnerRef = useRef();

    const runnning = () => {
      
      // 中心点的水平垂直距离
      const offsetX = targetXY.left + targetXY.width / 4 - (launchXY.x + 20 / 2);
      const offsetY = targetXY.top + targetXY.height / 4 - (launchXY.y + 20 / 2);

      if (!isRunning) {
        console.log('-----flyOuter_Style', flyOuter_Style)
        setFlyOuter_Style({...flyOuter_Style,
          display: 'block',
          left: `${launchXY.x  + 20 / 2}px`,
          top: `${launchXY.y  + 20 / 2}px`,
          transform:  `translateX(${offsetX}px)`,
          zIndex: 3
        })
        setFlyInner_Style({
          ...flyInner_Style,
          transform: `translateY(${offsetY}px)`
        })

        // 动画标志量
        setIsRunning(true)
        setTimeout(() => {
          setFlyOuter_Style({...flyOuter_Style,
            // display: 'none',
            left: '',
            top: '',
            transform:  '',
            zIndex: -1
          })

          setFlyInner_Style({
            ...flyInner_Style,
            transform: ''
          })

          setIsRunning(false)
          // afterRun();
        }, runTime);
      }
    }
    
    useEffect(() => {
      setFlyOuter_Style(Object.assign({},
        {
          position: 'absolute',
          width: '20px',
          height: '20px',
          // display: 'none',
          margin: ' -20px 0 0 -20px',
          transitionTimingFunction: 'linear',
          zIndex: 3,
          transition: `transform ${runTime}s`,
        },
        flyOuterStyle,
      ))
      // 运动小球内层样式
      setFlyInner_Style(Object.assign({},
        {
          zIndex: 3,
          position: 'absolute',
          width: '100%',
          height: '100%',
          borderRadius: '50%',
          backgroundColor: '#FF8A2B',
          color: '#ffffff',
          textAlign: 'center',
          lineHeight: '1',
          justifyContent: 'center',
          alignItems: 'center',
          transitionTimingFunction: 'cubic-bezier(.55,0,.85,.36)', // 向上抛物线的右边
          // transitionTimingFunction: 'cubic-bezier(0, 0, .25, 1.3)', // 向下抛物线的左边
          // transitionTimingFunction: 'cubic-bezier(0,1.01,.91,1.09)',
          transition: `transform ${runTime}s`,
        },
        flyInnerStyle,
      ))
      if (startRef?.current && endRef?.current && targetXY && launchXY) {
        console.log('startRef-endRef', startRef, endRef, launchXY, targetXY)
        // 运动小球外层样式
        

    
        runnning()

      }
    }, [startRef, endRef, launchXY, targetXY]); // eslint-disable-line


    return (
      <View style={flyOuter_Style} ref={flyOuterRef}>
        <View style={flyInner_Style} ref={flyInnerRef}>
          {children}
        </View>
      </View>
    );
}

export default flyBall